<template>
  <div class="app-container">
    <el-select v-model="base" @change="switchstore" placeholder="选择仓库" id ="storeselect">
      <el-option v-for="b in baseList" :key="b" :label="b" :value="b" />
    </el-select>
    <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleOnView" id ="storebutton">
      仓库数据
    </el-button>
    <el-button v-waves class="filter-item" type="primary" style="margin-left: 10px;"  icon="el-icon-edit" @click="handleOnMonitor" id ="monitorbutton"> 
      仓库监控
    </el-button>
    <div class="chartwrap">
      <div id="charts" />
    </div>
  </div>
</template>

<script>
import waves from '@/waves' // waves directive
import * as myecharts from "echarts";
import zyz from "@/api/zyz/";

var nameList = [
  "钳子",
  "帽子",
  "锤子",
  "钉子",
  "扫描仪",
  "电脑",
  "剪子",
  "便携式打印机",
  "耳机",
  "手持设备",
  "笔",
  "毛笔",
  "铅笔",
  "显示器",
  "音响",
  "话筒",
  "桌子",
  "椅子",
  "台灯",
  "吊灯",
  "尾灯",
  "汽车",
  "汽车人",
  "主机",
  "宇宙魔方",
  "主板",
];
var store1 = [[],[],[]]
var store2 = [[],[],[]]
var store3 = [[],[],[]]

export default {
  directives: { waves },
  mounted() {
    this.option = zyz.option;
    this.randomData();
    this.initChart();
  },
  data() {
    return {
      option: {},
      chart: {},
      baseList: ["仓库1", "仓库2", "仓库3"],
      base: "仓库1",
    };
  },

  methods: {
    initChart() {
      this.chart = myecharts.init(document.getElementById("charts"));
      this.chart.setOption(this.option);
    },
    handleOnView(){
      document.getElementById("storebutton").style.visibility="hidden";
      document.getElementById("storeselect").style.visibility="hidden";
      document.getElementById("monitorbutton").style.visibility="visible";
    },
    handleOnMonitor(){
      document.getElementById("storebutton").style.visibility="visible";
      document.getElementById("storeselect").style.visibility="hidden";
      document.getElementById("monitorbutton").style.visibility="hidden";
    },
    switchstore(value) {
      if (value == "仓库1") {
        this.option.title.text = "仓库1设备" 
        this.option.xAxis[0].data=store1[0]
        this.option.series[0].data=store1[1]
        this.option.series[1].data=store1[2]
        let s = store1[1].map(function(v, i) {
          return v + store1[2][i];
        });
        this.option.series[2].data=s
        this.chart.setOption(this.option);
      }
      if (value == "仓库2") {
        this.option.title.text = "仓库2设备" 
        this.option.xAxis[0].data=store2[0]
        this.option.series[0].data=store2[1]
        this.option.series[1].data=store2[2]
        let s = store2[1].map(function(v, i) {
          return v + store2[2][i];
        });
        this.option.series[2].data=s
        this.chart.setOption(this.option);
      }
      if (value == "仓库3") {
        this.option.title.text = "仓库3设备" 
        this.option.xAxis[0].data=store3[0]
        this.option.series[0].data=store3[1]
        this.option.series[1].data=store3[2]
        let s = store3[1].map(function(v, i) {
          return v + store3[2][i];
        });
        this.option.series[2].data=s
        console.log("3"+store3[2]);
        this.chart.setOption(this.option);
      }
    },
    update() {

    },

    randomData() {
      for(let i=0;i<27;i++){
        var index=Math.floor(Math.random()*26); 
        var value=Math.floor(Math.random()*15)+1;
        var value2=Math.floor(Math.random()*15)+1;
        store1[0].push(nameList[index])
        store1[1].push(value)
        store1[2].push(value2)
        index=Math.floor(Math.random()*26); 
        value=Math.floor(Math.random()*15)+1;
        value=Math.floor(Math.random()*15)+1;
        store2[0].push(nameList[index])
        store2[1].push(value)
        store2[2].push(value2)
        index=Math.floor(Math.random()*26); 
        value=Math.floor(Math.random()*15)+1;
        value=Math.floor(Math.random()*15)+1;
        store3[0].push(nameList[index])
        store3[1].push(value)
        store3[2].push(value2)
      }
    },

  },
};
</script>

<style>
.chartwrap {
  width: 100%;
  height: 100%;
  display: inline-block;
  text-align: center;
}
#charts {
  width: 100%;
  height: 600px;
  background-color: white;
}
</style>